<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>汇总计划列表</title>
		<link rel="stylesheet" href="css/summary.css">
		<link rel="stylesheet" href="boot/css/bootstrap.css">
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
		<script src="boot/js/bootstrap.js"></script>
		<script src="js/vue.js"></script>
		<style>
			.modal-xl{
				max-width: 100%!important;
			}
			.btn-warning{
				background-color: #009688 !important;
			}
		</style>
	</head>
	<body id="main">
		<div id="find">
			<div id="find01">
				订单编号:<input type="text" name="order_code" id="order_code" value=""  placeholder="请输入"/>
			</div>
			<div id="find02">
				订单日期：<div class="layui-input-inline" id="find05_1">
							 <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
						</div>
						
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline" id="find05_2">
						<input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">
					    </div>
			</div>
			<div id="find03">
				制单人：<input type="text" name="madecode" id="madecode" value="" placeholder="请输入"/>
			</div>
			<div id="find04">
				<input type="button" name="query" id="query" value="查询" @Click="getSumOrder()" />
			</div>
			<div id="find5">
				<div id="find5_1">
					<input type="button" name="summary" id="summary" value="汇总计划" data-toggle="modal" data-target="#HZ" @click="resetPage();getStockOrder();"/>
				</div>
				<div id="find5_2">
					<input type="button" name="import" id="import" value="导出" @click="exportExcel()" />
				</div>
			</div>
			<div id="showtable">
				<span>总体积：{{totalV}} m^3</span>
				<span>总价格：{{totalP}} 元</span>
				<table id="table1">
					<thead>
						<tr>
							<th><input type="checkbox" id="all" @click="allSelect()"></th>
							<th>序号</th>
							<th>汇总计划制定日期</th>
							<th>汇总计划订单编号</th>
							<th>备货需求起始时间</th>
							<th>备货需求结束时间</th>
							<th>数量</th>
							<th>订单金额</th>
							<th>总体积(m^3)</th>
							<th>制单人</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tb">
						<tr v-for="it in res">
							<td><input type="checkbox" v-bind:id="it.id"></td>
							<td>{{it.id}}</td>
							<td>{{it.sumOrderDate}}</td>
							<td>{{it.sumOrderCode}}</td>
							<td>{{it.startTime}}</td>
							<td>{{it.endTime}}</td>
							<td>{{it.proTotalNum}}</td>
							<td>{{it.totalPrice}}</td>
							<td>{{it.proTotalVolume}}</td>
							<td>{{it.madeCode}}</td>
							<td>
								<div class="btn-sm btn-warning" data-toggle="modal" data-target="#detail" @click="detail(it.id)">查看详情</div>
							</td>
						</tr>
					</tbody>
				</table>
				<nav aria-label="Page navigation">
					<ul class="pagination" id="page">
						<li>
							<div class="btn btn-dark">
							<a href="#" aria-label="Previous">
								<span aria-hidden="true" @click="prePage()">上一页</span>
							</a>
							</div>
						</li>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li>
							<div class="btn btn-dark">
							<a href="#" aria-label="Next">
								<span aria-hidden="true" @click="nextPage()">下一页</span>
							</a>
							</div>
						</li>
					</ul>
				</nav>
				<div>
					<!-- Modal -->
					<div class="modal fade" id="HZ" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="HZstaticBackdropLabel" aria-hidden="true">
						<div class="modal-dialog modal-xl">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="HZstaticBackdropLabel"> 制作汇总计划</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="cancelWHZ()">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>

								<div class="modal-body">
									<span>总体积：{{totalV}} m^3</span>&nbsp;&nbsp;&nbsp;
									<span>总金额：{{totalP}} 元</span>
									<table class="table" id="table2">
										<thead class="thead-dark">
										<tr>
											<th scope="col"><input type="checkbox" id="all2" @click="allSelect2()"></th>
											<th scope="col">序号</th>
											<th scope="col">提交备货计划日期</th>
											<th scope="col">备货计划订单编号</th>
											<th scope="col">经销商编码</th>
											<th scope="col">经销商名称</th>
											<th scope="col">区域</th>
											<th scope="col">备货需求开始时间</th>
											<th scope="col">备货需求结束时间</th>
											<th scope="col">产品编码</th>
											<th scope="col">产品型号</th>
											<th scope="col">品类</th>
											<th scope="col">数量</th>
											<th scope="col">开票价</th>
											<th scope="col">订单金额</th>
											<th scope="col">总体积（m³）</th>
											<th scope="col">是否已缴纳备货保证金</th>
											<th scope="col">状态</th>
											<th scope="col">操作</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="it in whz">
											<td><input type="checkbox" v-bind:id="it.order_code"></td>
											<td scope="row">{{it.id}}</td>
											<td>{{it.submit_date}}</td>
											<td>{{it.order_code}}</td>
											<td scope="col">{{it.dealer_code}}</td>
											<td scope="col">{{it.dealer_name}}</td>
											<td scope="col">{{it.area}}</td>
											<td>{{it.require_date_from}}</td>
											<td>{{it.require_date_to}}</td>
											<td>{{it.pro_code}}</td>
											<td>{{it.pro_attr}}</td>
											<td>{{it.pro_type}}</td>
											<td>{{it.pro_num}}</td>
											<td>{{it.base_price}}</td>
											<td>{{it.order_price}}</td>
											<td>{{it.total_volume}}</td>
											<td>是</td>
											<td>未汇总</td>
											<td>操作</td>
										</tr>
										</tbody>
									</table>
									<button type="button" class="btn btn-warning" @click="prePage2()">上一页</button>
									<button type="button" class="btn btn-warning" @click="nextPage2()">下一页</button>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-dismiss="modal" @click="cancelWHZ()">关闭</button>
									<button type="button" class="btn btn-primary"  @click="sumOrders()">下一步</button>
								</div>
							</div>
						</div>
					</div>


					<!-- Modal -->
					<div class="modal fade" id="NEXT" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="NEXTstaticBackdropLabel" aria-hidden="true">
						<div class="modal-dialog modal-dialog-scrollable modal-xl">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="NEXTstaticBackdropLabel">制作汇总计划</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>

								<div class="modal-body">
									<table class="table">
										<thead class="thead-dark">
										<tr >
											<th scope="col"><input type="checkbox"></th>
											<th scope="col">序号</th>
											<th scope="col">提交备货计划日期</th>
											<th scope="col">备货计划订单编号</th>
											<th scope="col">备货需求开始时间</th>
											<th scope="col">备货需求结束时间</th>
											<th scope="col">产品编码</th>
											<th scope="col">数量</th>
											<th scope="col">订单金额</th>
											<th scope="col">总体积（m³）</th>
											<th scope="col">是否已缴纳备货保证金</th>
											<th scope="col">状态</th>
											<th scope="col">操作</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="(it,index) in temp">
											<td><input type="checkbox"></td>
											<td>{{index+1}}</td>
											<td>{{it.sumOrderDate}}</td>
											<td>{{it.orderCode}}</td>
											<td>{{it.startTime}}</td>
											<td>{{it.endTime}}</td>
											<td>{{it.proCode}}</td>
											<td>{{it.proTotalNum}}</td>
											<td>{{it.totalPrice}}</td>
											<td>{{it.proTotalVolume}}</td>
											<td>是</td>
											<td>待生成调拨单</td>
											<td>操作</td>
										</tr>
										</tbody>
									</table>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" data-dismiss="modal"  @click="submitSum()">生成调拨单</button>
								</div>
							</div>
						</div>
					</div>


					<!-- Modal -->
					<div class="modal fade" id="detail" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="detailstaticBackdropLabel" aria-hidden="true">
						<div class="modal-dialog modal-dialog-scrollable modal-xl">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="detailstaticBackdropLabel">计划信息</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>

								<div class="modal-body">
									<table class="table table-striped table-dark" id="table3">
										<thead>
										  
										</thead>
										<tbody>
										  <tr>
											<th scope="row">计划制定日期 </th>
											<td>{{deta.sumOrderDate}}</td>
										  </tr>
										  <tr>
											<th scope="row">计划时间段</th>
											<td>{{deta.startTime}}--{{deta.endTime}}</td>
										  </tr>
										  <tr>
											<th scope="row">汇总计划单号</th>
											<td>{{deta.sumOrderCode}}</td>
										  </tr>
										  <tr>
											<th scope="row">制单人</th>
											<td>{{deta.madeCode}}</td>
										  </tr>
										  <tr>
											<th scope="row">需求总数量</th>
											<td>{{deta.proTotalNum}}</td>
										  </tr>
										  <tr>
											<th scope="row">总体积</th>
											<td>{{deta.proTotalVolume}}</td>
										  </tr>
										  <tr>
											<th scope="row">总金额</th>
											<td>{{deta.totalPrice}}</td>
										  </tr>
										  <tr>
											<th scope="row">备注</th>
											<td>{{deta.tip}}</td>
										  </tr>
										</tbody>
									  </table>
								</div>
								<div class="modal-footer">
								</div>
							</div>
						</div>
					</div>

				</div>
		    </div>
		</div>
	</body>
	<script>
	layui.use('laydate', function(){
	  var laydate = layui.laydate;
	 //常规用法
	   laydate.render({
	     elem: '#test1',
		   type: 'datetime'
	   });
	    //点我触发
	     laydate.render({
	       elem: '#test25'
	       ,eventElem: '#test25-1'
	       ,trigger: 'click',
			 type: 'datetime'
	     });
	  });
	</script>
	<script src="js/sumOrder.js"></script>
	<script src="js/yz.js"></script>
</html>
